<template>
  <div class="report">
    <div class="task">
      <div class="score">
        <div class="header">
          <div class="title">名称</div>
          <div class="grade">得分</div>
        </div>
        <div class="data" v-if="game == 1">
          <div class="item">
            <div class="option">距离差评分</div>
            <div class="grade">{{ getGameResult.zplaneBallScore }}</div>
          </div>
          <div class="item">
            <div class="option">距离差评级</div>
            <div class="grade">{{ getGameResult.planeBallScore }}</div>
          </div>
          <div class="item">
            <div class="option">速度差评分</div>
            <div class="grade">{{ getGameResult.onePlaneGrade }}</div>
          </div>
          <div class="item">
            <div class="option">平稳性</div>
            <div class="grade">{{ getGameResult.placidity }}</div>
          </div>
          <div class="item">
            <div class="option">及时性</div>
            <div class="grade">{{ getGameResult.timeliness }}</div>
          </div>
        </div>
        <div class="data" v-if="game == 2">
          <div class="item" v-if="planeGameScore.flyScoreList">
            <div class="option">摧毁敌机</div>
            <div class="grade">
              {{ planeGameScore.flyScoreList.strike }}/{{
                planeGameScore.flyScoreList.enemys
              }}
            </div>
          </div>
          <div class="item" v-if="planeGameScore.flyScoreList">
            <div class="option">红心得分</div>
            <div class="grade">
              {{ planeGameScore.flyScoreList.score }}/{{
                planeGameScore.flyScoreList.hearts
              }}
            </div>
          </div>
          <div
            class="item"
            v-show="getGameResult"
            v-for="(item, index) in gameResultList"
            :key="index"
          >
            <div class="option">{{ item.title }}</div>
            <div class="grade">
              {{ getGameResult[item.key] }}
            </div>
          </div>
        </div>
        <div class="data" v-if="game == 3">
          <div class="item" v-for="(item, index) in scoreData" :key="index">
            <div class="option">{{ item.name }}</div>
            <div class="grade">{{ item.grade }}</div>
          </div>
        </div>
      </div>
      <div class="detail">
        <div class="header">
          <div class="title">报告数据</div>
        </div>
        <div class="data" v-if="planeGameScore.flyUserList">
          <div class="item">
            <div class="option">任务名称：</div>
            <div class="grade">{{ planeGameScore.flyUserList.taskName }}</div>
          </div>
          <div class="item">
            <div class="option">任务：</div>
            <div class="grade">{{ planeGameScore.flyUserList.task }}</div>
          </div>
          <div class="item">
            <div class="option">时间：</div>
            <div class="grade">{{ planeGameScore.flyUserList.createTime }}</div>
          </div>
          <div class="item">
            <div class="option">飞行员：</div>
            <div class="grade">{{ planeGameScore.flyUserList.name }}</div>
          </div>
          <div class="item">
            <div class="option">单位：</div>
            <div class="grade">{{ planeGameScore.flyUserList.fUnit }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="record">
      <el-table
        height="100%"
        border
        stripe
        :data="flyResultData"
        v-if="game == 1"
      >
        <el-table-column label="时间" prop="balltime" />
        <el-table-column label="飞机速度" prop="airplaneSpeed" />
        <el-table-column label="小球速度">120</el-table-column>
        <el-table-column label="速度差" prop="num" />
        <el-table-column label="速度评级" prop="speedRank" />
        <el-table-column label="距离差" prop="distanceAll" />
        <el-table-column label="距离评级" prop="rank" />
      </el-table>
      <el-table
        height="100%"
        border
        stripe
        :data="planeGameScore.flyEventList"
        v-if="game == 2"
      >
        <el-table-column label="时间" prop="createTime" />
        <el-table-column label="发起者" prop="eventInitiator" />
        <el-table-column label="目标" prop="eventTarget" />
        <el-table-column label="事件" prop="eventName" />
        <el-table-column label="细节" prop="eventDetails" />
      </el-table>
      <el-table height="100%" border stripe :data="tableData" v-if="game == 3">
        <el-table-column label="时间" prop="tTime" />
        <el-table-column label="事件名称" prop="tEventName" />
        <el-table-column label="飞机经度" prop="lon" />
        <el-table-column label="飞机纬度" prop="lat" />
        <el-table-column label="飞机高度" prop="height" />
        <el-table-column label="评分" prop="threeScore" />
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getResult,
  getFlyResult,
  getGameEvent,
  getResuleGame3,
} from "@/api/flyGame.js";
import { updateFlyTask, deleteFlyTask } from "@/api/flyGame";
import PubSub from "pubsub-js";
import axios from "axios";
export default {
  components: {},
  name: "Report",
  data() {
    return {
      planeGameScore: {},
      gameResultList: [
        { title: "速度评分", key: "speedGrade" },
        { title: "时间评分", key: "timeGrade" },
        { title: "角度评分", key: "troubdAngleGrade" },
        { title: "飞行评分(红心/撞毁/击毁)", key: "flyGrade" },
        { title: "平均分", key: "ave" },
        { title: "评级(80-100 A,60-80 B,40-60 C,20-40 D,0-20 E)", key: "rank" },
      ],
      flag: true,
      pageNum: 1,
      flyResultData: [],
      requestFlag: false,
      tableData: [],
      scoreData: [],
    };
  },
  computed: {
    ...mapGetters(["getGameResult"]),
    game() {
      return localStorage.getItem("game");
    },
  },
  mounted() {
    this.$modal.alertWarning("刷新页面可能会造成数据丢失！");
    this.getGameData();
    this.getFlyData();
    this.getEvent();
    this.getScore();
    this.$nextTick(() => {
      this.lazyLoading();
    });
    this.save();
    this.cancel();
  },
  methods: {
    getScore() {
      getResuleGame3().then((res) => {
        this.scoreData = res.data;
      });
    },
    cancel() {
      PubSub.subscribe("delTestData", () => {
        deleteFlyTask({
          id: localStorage.getItem("gameTaskId"),
          // userId: localStorage.getItem("testUserId"),
          // parentId: localStorage.getItem("testTaskId"),
          // taskId: localStorage.getItem("game"),
        }).then((res) => {
          this.routerPush();
        });
      });
    },
    save() {
      PubSub.subscribe("saveTestData", () => {
        axios
          .post("http://192.168.1.10:3000/upload-video", {
            filePath: localStorage.getItem("videoPath") || "",
          })
          .then((res) => {
            if (res.status === 200) {
              updateFlyTask({
                id: localStorage.getItem("gameTaskId"),
                userId: localStorage.getItem("testUserId"),
                parentId: localStorage.getItem("testTaskId"),
                taskId: localStorage.getItem("game"),
                path: res.data.networkClip,
              }).then((res) => {
                this.$modal.msgSuccess(res.data);
                localStorage.removeItem("videoPath");
                this.routerPush();
              });
            }
          })
          .catch((err) => {
            console.log("err", err);
          });
      });
    },
    routerPush() {
      const game = localStorage.getItem("game");
      console.log(game);
      let str;
      switch (game) {
        case "1":
          str = "/test/user";
          break;
        case "2":
          str = "/test/planeGame";
          break;
        case "3":
          str = "/test/recording";
          break;
      }
      console.log(str);
      this.$router.push(str);
      console.log(123);
    },
    lazyLoading() {
      this.$nextTick(() => {
        let dom = document.querySelector(".el-table__body-wrapper");
        if (dom) {
          dom.addEventListener("scroll", () => {
            const scrollDistance =
              dom.scrollHeight - dom.scrollTop - dom.clientHeight;
            if (
              scrollDistance < 1 &&
              this.planeGameScore.flyEventList.length === 0
            ) {
              this.pageNum++;
              if (this.requestFlag) {
                this.requestFlag = false;
                this.getFlyData();
              }
            }
          });
        }
      });
    },
    async getGameData() {
      await getResult().then((res) => {
        this.planeGameScore = res.data;
      });
    },
    async getFlyData() {
      await getFlyResult({ pageNum: this.pageNum, pages: 10 }).then((res) => {
        this.flyResultData = this.flyResultData.concat(res.data);
        this.requestFlag = true;
      });
    },
    async getEvent() {
      await getGameEvent().then((res) => {
        this.tableData = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.report {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 20px;

  .task {
    margin-bottom: 2px;
    display: flex;
    height: 50%;
    .score {
      width: 40%;
    }
    .detail {
      width: 60%;
    }
    & > div {
      background: rgba($color: #000000, $alpha: 0.4);
    }
    & > div + div {
      margin-left: 2px;
    }
    .header {
      padding: 0 30px;
      height: 58px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba($color: #000000, $alpha: 0.3);
      .title {
        color: #4ebae6;
      }
      .grade {
        color: #b2bec2;
      }
    }
    .data {
      padding: 12px 30px;
      height: 90%;
      overflow-y: auto;
      .item {
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #4e5152;
        .option {
          color: #fff;
        }
        .grade {
          color: #b2bec2;
        }
      }
    }
  }
  .record {
    height: 50%;
    background: rgba($color: #000000, $alpha: 0.4);
    &::v-deep .el-table {
      border: none;
      background: none;
      .el-table__header tr {
        height: 58px;
        background: rgba($color: #000000, $alpha: 0.3);
        th {
          border-right: 2px solid rgba($color: #000000, $alpha: 0.8);
          border-bottom: none;
          font-size: 20px;
          font-weight: normal;
          color: #4ebae6;
          background: none;
        }
      }
      .el-table__body {
        tr {
          background: none;
          height: 44px;
          td {
            color: #fff;
            font-size: 18px;
            border-bottom-color: #4e5152;
            border-right: 2px solid rgba($color: #000000, $alpha: 0.8);
          }
          &.el-table__row--striped {
            td.el-table__cell {
              background: rgba($color: #4e5152, $alpha: 0.3);
            }
          }
          &:hover td,
          &:hover td.el-table__cell {
            background: rgba($color: #fff, $alpha: 0.2);
          }
        }
      }
      &::before {
        height: 0;
      }
      &::after {
        width: 0;
      }
    }
  }
}
.view {
  width: 100%;
  height: 100%;
  display: flex;
  background: rgba($color: #000000, $alpha: 0.3);
  .left {
    padding: 110px 0 110px 114px;
    width: 46%;
  }
  .right {
    padding-top: 120px;
    padding-left: 40px;
    height: 100%;
    .item {
      font-size: 20px;
      .name {
        margin-bottom: 20px;
        color: #4ebae6;
      }
      .option {
        display: flex;
        .title {
          width: 240px;
          color: #fff;
        }
        .content {
          color: #b2bec2;
        }
      }
      .option + .option {
        margin-top: 6px;
      }
    }
    .item + .item {
      margin-top: 60px;
    }
  }
}
</style>
